<template>
  <div>
    <div class="font-27 font-w font-white mar-t-9">{{orderStatusType}}</div>
    <div class="delivery-info-box mar-b-10 mar-t--9">
      <div class="bg-color-white panel-box">
        <!-- 门店配送-->
        <div class="panel-body pad-l-15 pad-r-15 pad-b-12 pad-t-12 bg-color-white" v-if="order.deliveryType === 5">
          <div class="flex-col">
            <div class="flex flex-between">
              <div class="flex-col">
                <div class="address-info flex v-align-c">
                  <span class="address-tag mar-r-4 width-28 height-15 red-color font-11 flex flex-center">家</span>
                  <span class="font-color font-18 font-w">{{order.customerAddress}}</span>
                </div>
                <span class="font-13 font-color-6">{{order.customerNickname}} {{order.customerPhone}}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 门店自提/社团-->
        <div class="panel-body pad-l-15 pad-r-15 pad-b-12 pad-t-12 bg-color-white" v-if="order.deliveryType === 4 || order.deliveryType === 3">
          <div class="font-15 font-color">
            <div v-if="order.shopMember" class="flex mar-b-8">
              <span class="font-w">提货人：</span>
              <span class="font-w">{{order.customerNickname}}  {{order.customerPhone}}</span>
            </div>
            <div v-if="order.villageCommander" class="flex flex-between mar-b-8">
              <div class="flex">
                <span class="font-w">提货点：</span>
                <span class="font-w">{{order.villageCommander.takeName}}</span>
              </div>
              <div v-if="order.villageCommander.phone" class="flex v-align-c btn-box">
                <span class="height-14 v-line mar-r-6">|</span>
                <div class="flex v-align-c" @click="callPhone">
                  <img class="width-12 height-12" v-if="fileSpace" :src="fileSpace + '/images/phone-icon.png'" alt="">
                  <span class="font-15 mar-l-4">联系团长</span>
                </div>
              </div>
            </div>
            <div v-if="order.villageCommander" class="flex address-box">
              <div class="flex">
                <span class="font-w">地&nbsp;&nbsp;&nbsp;址：</span>
                <div class="width-149 text-align-j font-color-6">
                  {{order.villageCommander.takeAddress}}
                </div>
              </div>
              <div class="flex v-align-c btn-box">
                <span class="height-14 v-line mar-r-6">|</span>
                <div class="flex v-align-c" @click="goWxLocal">
                  <!-- <img class="width-12 height-12" v-if="fileSpace" :src="fileSpace + '/images/phone-icon.png'" alt=""> -->
                  <van-icon name="map-marked" />
                  <span class="font-15 mar-l-4">导航前往</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="prompt font-12 pad-t-10 pad-b-10 pad-l-15 flex v-align-c">
          <img v-if="fileSpace" class="width-13 height-13 mar-r-6" :src="fileSpace + '/images/save-icon.png'" alt="">
          <span>购物中如有问题，可联系客服，保障售后无忧</span>
        </div>
      </div>
    </div>
    <!-- 商品信息 -->
    <div class="goods-list-box pad-t-10 pad-l-16 pad-r-12 pad-b-1 mar-b-10">
      <div class="shop-name pad-b-13 mar-b-11">
        <span class="font-color font-16" v-if="order.memberTakeStoreName">{{order.memberTakeStoreName}}</span>
      </div>
      <div class="mar-b-18">
        <div v-for="(item, index) in order.orderGoodsList" :key="index" class="mar-t-15">
          <div class="flex">
            <div class="goods-img-box mar-r-8">
              <img class="width-80 height-80" v-if="item.goodsImageUrl" :src='item.goodsImageUrl' alt="">
            </div>
            <div class="flex-col goods-box-right">
              <span class="_line-2 font-16 font-color font-w">{{item.goodsTitle}}</span>
              <div class="flex goods-price-info">
                <div class="font-12 font-color-9 flex-col">
                  <div>
                    <span>￥{{ item.goodsPrice }}/件</span>
                    <span class="mar-l-13">共{{ item.goodsNum }}件</span>
                  </div>
                  <div v-if="order.deliveryType !== 3">
                    <span v-if="order.deliveryType === 4">{{sendTime}}到店提货</span>
                    <span v-if="order.deliveryType === 5">约{{sendTime}}送达</span>
                  </div>
                </div>
                <div v-if="order.orderStatus !== -2 && order.orderStatus !== -1 && order.orderStatus !== 0 && order.orderStatus !== 4">
                  <div @click.stop="linkToDetail(item)"
                    v-if="!item.afterSaleGoodsNum && item.afterSaleStatus===0 || !item.afterSaleGoodsNum && item.afterSaleStatus===1 || !item.afterSaleGoodsNum && item.afterSaleStatus===2">
                    <div class="font-13 font-color retrun-btn flex flex-center width-56 height-25">退款中</div>
                  </div>
                  <div class="font-13 font-color retrun-btn flex flex-center width-56 height-25"
                    v-else-if="item.afterSaleStatus===-3 || item.afterSaleStatus===4 || (item.afterSaleStatus===3 && (item.afterSaleGoodsNum===item.goodsNum))">退款关闭</div>
                  <div @click.stop="linkToApply(item)"
                    v-else-if="item.afterSaleStatus===-2 || item.afterSaleStatus===-1 || (item.afterSaleStatus===3 && (item.afterSaleGoodsNum<item.goodsNum))">
                    <div class="font-13 font-color retrun-btn flex flex-center width-56 height-25">退货</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 总额 优惠卷 实付-->
      <div class="mar-b-10">
        <div class=" font-color flex flex-between mar-b-8">
          <span class="font-16">商品总额</span>
          <span class="font-19 font-w"><span class="font-16">¥</span>{{ order.actualPrice }}</span>
        </div>
        <div class=" font-color flex flex-between mar-b-8" v-if="order.deliveryType === 3">
          <span class="font-16">团长佣金</span>
          <span class="font-19 font-w"><span class="font-16">¥</span>{{ order.memberCommission }}</span>
        </div>
        <div class="flex coupon-box mar-b-15" v-if="order.couponReduceAmount !== '0.00'">
          <div class="flex v-align-c">
            <span class="coupon-tag width-16 height-16 font-12 flex flex-center">券</span>
            <span class="font-16 mar-l-3">优惠券</span>
          </div>
          <span class="font-19 font-w red-color"><span class="font-16">-¥</span>{{order.couponReduceAmount}}</span>
        </div>
        <div  class="flex">
          <div style="margin-left:auto">
            <span class="font-16 font-color-9">实付:</span>
            <span class="font-16 font-color font-w">¥</span>
            <span class="font-26 font-color font-w">{{order.actualPrice}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 备注 -->
    <div class="remarks-box font-16 pad-t-11 pad-b-7 pad-l-15 flex pad-r-15 v-align-c">
      <span class="font-color">备注：</span>
      <input type="text" class="font-color-9 flex-item" placeholder="选填，填写您的特殊需求">
    </div>
    <!-- 订单信息 -->
    <div class="flex-col order-info-box pad-t-10 pad-l-15 pad-b-20 pad-r-15 mar-b-15">
      <div class="mar-b-8 flex v-align-c">
        <span class="font-14 font-color-9">订单编号</span>
        <span class="mar-l-20">{{order.orderNo}}</span>
        <span @click="$pt.setClipboardData({data: order.orderNo})" class="font-12 red-color width-37 height-18 flex flex-center copy-btn mar-l-20">复制</span>
      </div>
      <div class="font-14 mar-b-8">
        <span class="font-color-9">下单时间</span>
        <span class="font-color mar-l-20">{{order.createTime}}</span>
      </div>
      <div class="font-14 mar-b-8">
        <span class="font-color-9">付款时间</span>
        <span class="font-color mar-l-20">{{order.payTime}}</span>
      </div>
      <div class="font-14 mar-b-8">
        <span class="font-color-9">提货时间</span>
        <span class="font-color mar-l-20" v-if="order.receivedTime">{{order.receivedTime}}</span>
      </div>
      <div class="font-14 mar-b-8">
        <span class="font-color-9">完成时间</span>
        <span class="font-color mar-l-20" v-if="order.completeTime">{{order.completeTime}}</span>
      </div>
      <div class="font-14" v-if="(order.deliveryType === 3 || order.deliveryType === 4)&&(order.orderStatus === 3 || order.orderStatus === 4)">
        <span class="font-color-9">核销员</span>
        <span class="font-color mar-l-20" v-if="order.deliveryType === 3">{{order.commanderNickname}}</span>
        <span class="font-color mar-l-20" v-if="order.deliveryType === 4">{{order.memberTakeStoreName}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getProjectOrder } from '@/api/distribution'
export default {
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  data() {
    return {
      showCodeAlert: false,
      urlFrom: '',
      nicknameAdd: '',
      phoneAdd: '',
      order: {}, // 订单详情结果信息
      goodsTotalPrice: '0.00',
      orderStatusText: '',
      orderStatusTips: '',
      orderStatusType: '',
      goodsListLen: 0,
      storeName: '', // 门店名称
      sendTime: '' // 配送时间
    }
  },
  onReady() {
    this.urlFrom = this.getCurrentPage().query.urlFrom
    // 售后页面，返回订单详情时，需获取订单最新的售后状态
    // if (this.$pt.getStorageSync('refundType')) {
    //   this.initEls()
    // }
    this.initEls()
  },
  mounted() {
  },
  methods: {
    initEls() {
      this.getOrder()
    },
    // 导航前往
    goWxLocal() {
      if (!this.order.villageCommander.latFormat || !this.order.villageCommander.lngFormat) return
      this.$pt.openLocation({
        latitude: Number(this.order.villageCommander.latFormat),
        longitude: Number(this.order.villageCommander.lngFormat),
        address: this.order.villageCommander.takeAddress
      })
    },
    // 拨打电话
    callPhone() {
      if (!this.order.villageCommander.phone) return
      this.$pt.makePhoneCall({
        phoneNumber: this.order.villageCommander.phone
      })
    },
    getOrder() {
      const orderId = this.getCurrentPage().query.orderId
      if (!orderId) {
        return
      }
      getProjectOrder(orderId).then((response) => {
        if (response.isError) return
        this.order = response.data
        this.order.statusOverNum = 0
        if ('deliveryTime' in response.data) {
          this.sendTime = `${this.getCurrentDate(response.data['deliveryTime'].replace(/-/g, '/'))} ${this.getCurrentTime(response.data['deliveryTime'].replace(/-/g, '/'))}`
        }
        // 收货人信息
        this.nicknameAdd = response.data.customerNickname
        this.phoneAdd = response.data.customerPhone
        // this.addressAdd = response.data.customerAddress
        // this.memberAvatar = response.data.memberAvatar
        // this.customerServiceType = response.data.customerServiceType ? response.data.customerServiceType : ''
        // this.customerServiceFlag = response.data.customerServiceFlag
        switch (this.order.orderStatus) {
          case -2:
            this.orderStatusType = '已取消'
            this.orderStatusText = '订单已取消'
            this.orderStatusTips = '如有问题可在下方联系卖家'
            break
          case -1:
            this.orderStatusType = '已取消'
            this.orderStatusText = '订单已取消'
            this.orderStatusTips = '如有问题可在下方联系卖家'
            break
          case 0:
            this.orderStatusType = '未付款'
            this.orderStatusText = '等待买家付款'
            this.orderStatusTips = '请在24小时内完成支付，逾期支付，订单将自动取消'
            break
          case 1:
            this.orderStatusType = '待发货'
            if (this.order.orderType === 10) {
              this.orderStatusText = '等待卖家发货'
              this.orderStatusTips = '如有问题可在下方联系卖家'
            } else {
              this.orderStatusText = '等待卖家发货'
              this.orderStatusTips = '如有问题可在下方联系卖家'
            }
            break
          case 2:
            this.orderStatusType = '已发货'
            if (this.order.orderType === 10) {
              this.orderStatusText = '物流派送中'
              this.orderStatusTips = '如有问题可在下方联系卖家'
            } else {
              this.orderStatusText = '物流派送中'
              this.orderStatusTips = '如有问题可在下方联系卖家'
            }
            break
          case 3:
            this.orderStatusType = '已收货'
            this.orderStatusText = '订单已收货'
            this.orderStatusTips = '如有问题可在下方联系卖家'
            break
          case 4:
            this.orderStatusType = '已完成'
            this.orderStatusText = '订单已完成'
            this.orderStatusTips = '如有问题可在下方联系卖家'
            break
          case 20:
            // this.orderStatusType = '部分已发货'
            // this.orderStatusText = '物流派送中'
            // this.orderStatusTips = '如有问题可在下方联系卖家'
            this.orderStatusType = '待发货'
            this.orderStatusText = '等待卖家发货'
            this.orderStatusTips = '如有问题可在下方联系卖家'
            break
        }
        if (this.order.deliveryType === 2) {
          switch (this.order.verifyStatus) {
            case 1:
              this.orderStatusType = '待核销'
              this.orderStatusText = '订单已取消'
              this.orderStatusTips = '如有问题可在下方联系卖家'
              break
            case 3:
              this.orderStatusType = '已收货'
              this.orderStatusText = '等待买家付款'
              this.orderStatusTips = '请在24小时内完成支付，逾期支付，订单将自动取消'
              break
            case 4:
              this.orderStatusType = '已完成'
              this.orderStatusText = '等待买家付款'
              this.orderStatusTips = '请在24小时内完成支付，逾期支付，订单将自动取消'
              break
          }
        }
        let total = 0
        if (this.order && this.order.orderGoodsList) {
          this.goodsListLen = this.order.orderGoodsList.length
          this.order.orderGoodsList.forEach(goods => {
            let price = goods.goodsPrice * goods.goodsNum
            total += price
          })
        }
        this.goodsTotalPrice = total.toFixed(2)
        this.order.orderGoodsList.forEach((item, index) => {
          if (item.afterSaleStatus === -3 || item.afterSaleStatus === 4 || (item.afterSaleStatus === 3 && (item.afterSaleGoodsNum === item.goodsNum))) {
            this.order.statusOverNum++
          }
        })
      }).catch(() => {
      })
    },
    // 获取当前时间 时分秒
    getCurrentTime(t) {
      const date = new Date(t)
      const hour = date.getHours()
      const minute = date.getMinutes() > 10 ? date.getMinutes() : `0${date.getMinutes()}`
      return `${hour}:${minute}`
    },
    // 获取当前年月日
    getCurrentDate(t) {
      const date = new Date(t)
      const month = date.getMonth() + 1
      const day = date.getDate()
      return `${month}月${day}日`
    }
  }
}
</script>

<style lang="less" scoped>
  .delivery-info-box {
    background: #fff;
    position: relative;
    margin-top: 12px;
    border-radius: 10px;
    .panel-box {
      border-radius: 10px;
      .panel-body {
        border-radius: 10px;
        box-shadow: 0px 1px 1px rgba(195, 195, 195, 0.22);
        .address-info {
          .address-tag {
            background: rgba(255,36,61,0.16);
            border-radius: 3px;
          }
        }
        .self-address-info {
          justify-content: space-between;
        }
        .address-box {
          justify-content: space-between;
          align-items: flex-start;
        }
        .btn-box {
          color: #0376FF;
          .v-line {
            overflow: hidden;
            font-size: 12px;
            color: #c5c5c5;
            position: relative;
            top: -2px;
          }
        }
      }
    }
    .prompt {
      color: #A68589;
      border-radius: 0px 0px 10px 10px;
      box-sizing: border-box;
    }
  }
  .goods-list-box {
    background: #fff;
    border-radius: 10px;
    .shop-name {
      border-bottom: 0.5px solid #f5f5f5;
    }
    .goods-img-box {
      img {
        border-radius: 10px;
      }
    }
    .goods-box-right {
      justify-content: space-between;
      flex: 1;
      .goods-price-info {
        justify-content: space-between;
        align-items: flex-end;
        .retrun-btn {
          border: 1px solid #E3E3E3;
          border-radius: 13px;
        }
      }
    }
    .coupon-box {
      justify-content: space-between;
      .coupon-tag {
        background: #FF243D;
        color: #fff;
        border-radius: 2px;
      }
    }
  }
  .order-info-box {
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    // margin-bottom: 68px;
    .copy-btn {
      border: 1px solid #FF243D;
      border-radius: 9px;
    }
  }
  .remarks-box {
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
  }
  .red-color {
    color: #FF243D;
  }
  .gray-bg-color {
    background: #F5F5F5;
  }
  .btn-group-box {
    background: #fff;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    box-sizing: border-box;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    justify-content: flex-end;
    .cancle-btn {
      color: #FF243D;
      background: #fff;
      width: 112px;
      height: 38px;
      border-radius: 19px;
      border: 1px solid #FF243D;
    }
    .get-code-btn {
      color: #fff;
      background: #FF243D;
      width: 112px;
      height: 38px;
      border-radius: 19px;
    }
  }
  .code-box {
    .alert-bg {
      background: #FF243D;
      border-radius:0px 0px 10px 10px;
    }
    .subject {
      align-items: center;
      .dots {
        margin-right: 4px;
        width: 4px;
        height: 4px;
        background: #fff;
        border-radius: 50%;
      }
    }
    .code-area {
      background: #fff;
      border-radius: 10px;
      position: relative;
      z-index: 10;
      // top: -57px;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0px 1px 11px 0px rgba(255, 139, 152, 0.31);
    }
    .remark-text {
      margin-top: -35px;
      margin-bottom: 19px;
    }
  }
  ._line-2{
    line-height: 1.4;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    word-break:break-word;
  }
</style>
